<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SinmaJS 演示中心</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 1.2em;
        }
        .version-info {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            border-left: 5px solid #4CAF50;
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        .demo-card {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .demo-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .demo-card h3 {
            color: #333;
            margin-top: 0;
        }
        .demo-card p {
            color: #666;
            margin: 15px 0;
        }
        .btn {
            display: inline-block;
            background: #4CAF50;
            color: white;
            text-decoration: none;
            padding: 12px 25px;
            border-radius: 6px;
            font-weight: bold;
            transition: background 0.3s;
            margin: 5px;
        }
        .btn:hover {
            background: #45a049;
        }
        .btn-secondary {
            background: #2196F3;
        }
        .btn-secondary:hover {
            background: #1976D2;
        }
        .features {
            background: #e8f5e8;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }
        .features h3 {
            color: #2e7d32;
            margin-top: 0;
        }
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            list-style: none;
            padding: 0;
        }
        .feature-list li {
            background: white;
            padding: 10px;
            border-radius: 5px;
            border-left: 3px solid #4CAF50;
        }
        .status {
            background: #e3f2fd;
            border-radius: 10px;
            padding: 15px;
            margin: 20px 0;
            border-left: 5px solid #2196F3;
        }
        .emoji {
            font-size: 1.5em;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 SinmaJS 演示中心</h1>
        <p class="subtitle">专为中文开发者设计的JavaScript工具函数集合</p>

        <div class="version-info">
            <h3><span class="emoji">📦</span>版本信息</h3>
            <p><strong>当前版本:</strong> v1.1.0</p>
            <p><strong>模块总数:</strong> 20个完整模块</p>
            <p><strong>兼容性:</strong> 保持所有原有API和向后兼容</p>
            <p><strong>支持环境:</strong> 浏览器、Node.js、Vue.js、jQuery</p>
        </div>

        <div class="features">
            <h3><span class="emoji">🚀</span>全部功能模块（20个）</h3>
            <ul class="feature-list">
                <li><strong>✅ validator</strong> - 数据验证、表单校验</li>
                <li><strong>📝 string</strong> - 字符串处理、编码转换</li>
                <li><strong>🔢 number</strong> - 数字格式化、精度计算</li>
                <li><strong>📅 date</strong> - 日期时间处理、格式化</li>
                <li><strong>📦 array</strong> - 数组操作、数据处理</li>
                <li><strong>🎯 object</strong> - 对象操作、深度克隆</li>
                <li><strong>⚙️ function</strong> - 函数工具、防抖节流</li>
                <li><strong>🔗 url</strong> - URL解析、参数处理</li>
                <li><strong>🖱️ dom</strong> - DOM操作、事件处理</li>
                <li><strong>🀄 chinese</strong> - 中文处理、拼音转换</li>
                <li><strong>🎨 color</strong> - 颜色处理、格式转换</li>
                <li><strong>💾 storage</strong> - 本地存储、Cookie管理</li>
                <li><strong>📱 device</strong> - 设备检测、浏览器识别</li>
                <li><strong>🌐 request</strong> - HTTP请求、API调用</li>
                <li><strong>🔒 crypto</strong> - 加密解密、哈希算法</li>
                <li><strong>📊 json</strong> - JSON处理、路径操作</li>
                <li><strong>📁 file</strong> - 文件处理、下载管理</li>
                <li><strong>🗄️ cache</strong> - 缓存管理、LRU算法</li>
                <li><strong>🖼️ image</strong> - 图片处理、滤镜效果</li>
                <li><strong>🔄 convert</strong> - 类型转换、单位换算</li>
            </ul>
        </div>

        <div class="demo-grid">
            <div class="demo-card">
                <h3>🎯 完整功能演示</h3>
                <p>体验所有20个功能模块，超过200个实用函数的完整演示，涵盖日常开发的各个方面。</p>
                <a href="demo-all-features.html" class="btn">完整演示</a>
            </div>

            <div class="demo-card">
                <h3>🌟 扩展功能演示</h3>
                <p>专门体验扩展模块：加密解密、JSON处理、文件操作、缓存管理、图片处理和类型转换等高级功能。</p>
                <a href="demo-new-features.html" class="btn">扩展功能</a>
            </div>

            <div class="demo-card">
                <h3>🔄 版本兼容测试</h3>
                <p>测试JavaScript、jQuery、Vue.js三个版本的API一致性和向后兼容性。</p>
                <a href="test-versions.html" class="btn btn-secondary">兼容性测试</a>
            </div>
        </div>

        <div class="status">
            <h3><span class="emoji">✅</span>测试状态</h3>
            <p><strong>Node.js 测试:</strong> <span style="color: green;">✓ 通过</span> - 所有新功能模块正常工作</p>
            <p><strong>浏览器测试:</strong> <span style="color: green;">✓ 可用</span> - 访问上方演示页面体验</p>
            <p><strong>版本同步:</strong> <span style="color: green;">✓ 完成</span> - 所有版本已更新</p>
            <p><strong>类型定义:</strong> <span style="color: green;">✓ 完整</span> - TypeScript支持完善</p>
        </div>

        <div class="version-info">
            <h3><span class="emoji">📄</span>使用说明</h3>
            <p><strong>浏览器:</strong> 引入 <code>javascript/sinma.js</code> 或 <code>dist/sinma.js</code></p>
            <p><strong>jQuery:</strong> 引入 <code>jquery/sinma.js</code></p>
            <p><strong>Vue.js:</strong> 引入 <code>vuejs/sinma.js</code></p>
            <p><strong>Node.js:</strong> <code>const sinma = require('./sinmajs_npm/index.js')</code></p>
            <p><strong>ES Modules:</strong> <code>import sinma from './dist/sinma.esm.js'</code></p>
        </div>

        <div style="text-align: center; margin-top: 30px; color: #666;">
            <p>🛠️ 开发工具: SinmaJS v1.1.0 | 📅 更新时间: 2025-10-11</p>
            <p>💡 设计理念: 借鉴 Lodash + Hutool | 🎯 目标: 中文开发者友好</p>
        </div>
    </div>

    <script>
        // 简单的页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.demo-card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    card.style.transition = 'opacity 0.6s, transform 0.6s';
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 100);
                }, index * 200);
            });
        });
    </script>
</body>
</html>